<template>
	<view class="activity-detail-page">

		<!-- Tab切换栏 -->
	<!-- 	<view class="tab-container">
			<view class="tab-item" :class="{ active: currentTab === 0 }" @click="switchTab(0)">
				活动详情
			</view>
			<view class="tab-item" :class="{ active: currentTab === 1 }" @click="switchTab(1)">
				参与活动客户
			</view>
		</view> -->

		<!-- Tab内容区域 -->
		<view class="tab-content">
			<!-- 活动详情Tab -->
			<view v-if="currentTab === 0" class="detail-content">
				<!-- 活动标题 -->
				<!-- <view class="activity-title">{{detailData.zjName}}</view> -->
				<!-- 活动基本信息 -->
				<view class="info-list">
					<view class="info-item">
						<text class="info-label">姓名：</text>
						<text class="info-value">{{detailData.zjName}}</text>
					</view>
					<view class="info-item">
						<text class="info-label">手机号：</text>
						<text class="info-value">{{detailData.zjMobile}}</text>
					</view>
					<view class="info-item">					
						<text class="info-label">性别：</text>
						<text class="info-value">{{detailData.zjXingbie}}</text>
						<!-- <u-icon name="arrow-right" color="#999" size="24rpx" class="right-icon"></u-icon> -->
					</view>
					<view class="info-item">
						<text class="info-label">年龄：</text>
						<text class="info-value">{{detailData.zjAge}}</text>
					</view>
					<view class="info-item">
						<text class="info-label">职业：</text>
						<text class="info-value">{{detailData.zjZhiye}}</text>
					</view>
					<view class="info-item">
						<text class="info-label">感兴趣的金融产品：</text>
						<text class="info-value">{{detailData.zjXingqu}}</text>
					</view>
					<view class="info-item">
						<text class="info-label">奖品：</text>
						<text class="info-value">{{detailData.jpName}}</text>
					</view>
				</view>
			
			</view>

			<!-- 参与活动客户Tab -->
			
				<!-- <u-empty text="暂无参与客户数据" mode="list" class="empty-customer" v-show="activeTotal ==0"></u-empty> -->
			</view>
		</view>

		<!-- 底部操作按钮 -->
		<!-- <view class="bottom-btn-container">
			<button class="bottom-btn" @click="copyActivityLink">复制活动链接并转发</button>
		</view> -->

		<!-- 筛选阶段 -->
		<!-- <u-picker :show="show" :columns="columns" @cancel="show = false"></u-picker> -->
	</view>
</template>

<script>
	import api from "@/utils/api.js";
	import request from "@/utils/request.js";

	export default {
		data() {
			return {
				codeData: "", //code值 (链接需要)
				currentTab: 0, // 0:活动详情 1:参与活动客户
				// copyText: "",
				show: false,
				detailData: [], //详情信息
				infoListData:[],//参与活动客户
				activeTotal:0,//客户总数
				columns: [
					['了解', '感兴趣', '参与', '完成']
				],
			};
		},
		onLoad(options) {
			// console.log(options, "999");
			if (options) {
				// this.codeData = options.Id;
				this.getDetailData(options.Id);
			}
		},
		computed: {
		
		},
		methods: {
			// 获取详情信息
			getDetailData(id) {
				request(api.activeInfoDetail + id, "GET")
					.then(res => {
						// console.log(res);
						if (res.code == 200) {
							this.detailData = res.data;
						}
					})
					.catch(err => {
						console.log(err);
					})
				// activeDetail
			},
			// 获取参与活动客户
		
			// 返回上一页
			navBack() {
				uni.navigateBack({
					delta: 1
				});
			},

			// 显示更多操作
			showMore() {
				uni.showActionSheet({
					itemList: ['编辑活动', '删除活动', '查看数据'],
					success: (res) => {
						switch (res.tapIndex) {
							case 0:
								uni.showToast({
									title: '进入编辑',
									icon: 'none'
								});
								break;
							case 1:
								this.confirmDelete();
								break;
							case 2:
								uni.showToast({
									title: '查看数据统计',
									icon: 'none'
								});
								break;
						}
					}
				});
			},

			// 确认删除
			confirmDelete() {
				uni.showModal({
					title: '提示',
					content: '确定要删除该活动吗？',
					success: (res) => {
						if (res.confirm) {
							uni.navigateBack({
								delta: 1
							});
							uni.showToast({
								title: '活动已删除',
								icon: 'success'
							});
						}
					}
				});
			},

			// 切换Tab
			switchTab(index) {
				this.currentTab = index;
			},

			// 复制文案到剪贴板
			copyToClipboard() {
				uni.setClipboardData({
					data: this.copyText,
					success: () => {
						uni.showToast({
							title: '文案已复制',
							icon: 'success'
						});
					}
				});
			},

			// 复制活动链接并转发
			copyActivityLink() {
				uni.setClipboardData({
					data: 'https://example.com/activity/lucky-draw/123',
					success: () => {
						uni.showToast({
							title: '链接已复制',
							icon: 'success'
						});
						// 延迟显示转发选项
						setTimeout(() => {
							uni.showShareMenu({
								withShareTicket: true,
								menus: ['shareAppMessage', 'shareTimeline']
							});
						}, 500);
					}
				});
			}
		}
	};
</script>

<style scoped>
	.activity-detail-page {
		background-color: #f5f7fa;
		min-height: 100vh;
		padding-bottom: 120rpx;
		/* 预留底部按钮空间 */
	}

	/* 导航栏样式 */
	::v-deep .u-navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
	}

	/* Tab切换栏 */
	.tab-container {
		display: flex;
		background-color: #fff;
		position: fixed;
		top: 0;
		/* 导航栏高度 */
		left: 0;
		right: 0;
		z-index: 9;
		border-bottom: 1px solid #f0f0f0;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 24rpx 0;
		font-size: 30rpx;
		color: #666;
		position: relative;
	}

	.tab-item.active {
		color: #3589e7;
		font-weight: 500;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 30%;
		width: 40%;
		height: 4rpx;
		background-color: #3589e7;
	}

	/* Tab内容区域 */
	.tab-content {
		padding-top: 20rpx;
		/* 导航栏(88) + Tab栏(88) */
	}

	/* 活动详情样式 */
	.detail-content {
		padding: 24rpx;
	}

	.activity-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 24rpx;
		/* padding-bottom: 24rpx; */
		/* border-bottom: 1px solid #f0f0f0; */
	}

	.info-list {
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 24rpx;
		overflow: hidden;
	}

	.info-item {
		display: flex;
		align-items: center;
		padding: 24rpx;
		border-bottom: 1px solid #f5f5f5;
	}

	.info-item:last-child {
		border-bottom: none;
	}

	.info-label {
		color: #999;
		font-size: 28rpx;
		min-width: 160rpx;
	}

	.info-value {
		color: #333;
		font-size: 28rpx;
		flex: 1;
	}

	.right-icon {
		margin-left: 10rpx;
	}

	/* 区块样式 */
	.section {
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 24rpx;
		padding: 24rpx;
	}

	.section-title {
		display: flex;
		align-items: center;
		color: #333;
		font-size: 30rpx;
		font-weight: 500;
		margin-bottom: 24rpx;
	}

	.rule-icon,
	.setting-icon,
	.star-icon {
		margin-left: 10rpx;
	}

	/* 活动规则内容 */
	.rule-content {
		padding-left: 10rpx;
	}

	.rule-item {
		color: #666;
		font-size: 28rpx;
		margin-bottom: 16rpx;
		line-height: 1.5;
	}

	.rule-item:last-child {
		margin-bottom: 0;
	}

	/* 奖项设置占位区 */
	.award-placeholder {
		height: 200rpx;
		background-color: #f9f9f9;
		border-radius: 8rpx;
		padding: 15rpx;
		display: flex;
		/* align-items: center; */
		/* justify-content: center; */
		/* color: #ccc; */
		font-size: 26rpx;
		box-sizing: border-box;
	}

	/* 宣传文案区域 */
	.copy-textarea {
		width: 100%;
		min-height: 180rpx;
		background-color: #f9f9f9;
		border-radius: 8rpx;
		padding: 20rpx;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		resize: none;
	}

	.copy-btn {
		background-color: #f0f7ff;
		color: #3589e7;
		border: none;
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		border-radius: 8rpx;
	}

	/* 参与客户Tab样式 */
	.customer-content {
		padding: 24rpx;
		min-height: 500rpx;
	}

	.empty-customer {
		margin-top: 200rpx;
	}

	/* 底部操作按钮 */
	.bottom-btn-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		z-index: 8;
	}

	.bottom-btn {
		background-color: #3589e7;
		color: #fff;
		border: none;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		border-radius: 8rpx;
	}

	/* 客户列表区域 */
	.customer-list {
		/* padding: 176rpx 24rpx 24rpx; */
		/* 导航栏+Tab栏高度 */
	}

	/* 客户总数 */
	.customer-count {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
		padding-left: 8rpx;
	}

	/* 客户列表项 */
	.customer-items {
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.customer-item {
		display: flex;
		align-items: center;
		padding: 20rpx 24rpx;
		border-bottom: 1px solid #f5f5f5;
	}

	.customer-item:last-child {
		border-bottom: none;
	}

	/* 头像区域 */
	.avatar-container {
		position: relative;
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}

	.avatar {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-color: #f0f0f0;
	}

	/* 特殊客户标识 */
	.special .special-marker {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		background-color: #ff7d00;
		border: 2rpx solid #fff;
	}

	/* 客户信息 */
	.customer-info {
		flex: 1;
		min-width: 0;
		/* 解决文本溢出问题 */
	}

	.name-company {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.customer-name {
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
		margin-right: 12rpx;
	}

	.company {
		font-size: 24rpx;
		color: #999;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.stage {
		font-size: 26rpx;
		color: #666;
	}

	.stage-text {
		color: #3589e7;
	}

	/* 操作按钮 */
	.action-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background-color: #f0f7ff;
	}
</style>